<template>
  <div class="lease-container">
    <div class="page-header">
      <div class="header-content">
        <h2 class="title">租赁管理中心</h2>
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/official' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <div class="main-content">
      <!-- 数据概览卡片 -->
      <div class="overview-cards">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6">
            <div class="data-card">
              <div class="card-icon bg-blue">
                <i class="el-icon-collection"></i>
              </div>
              <div class="card-info">
                <div class="card-title">租赁订单总数</div>
                <div class="card-value">1,283</div>
                <div class="card-trend">
                  <span class="trend-up"><i class="el-icon-top"></i> 12%</span>
                  <span class="period">较上月</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="data-card">
              <div class="card-icon bg-green">
                <i class="el-icon-shopping-cart-full"></i>
              </div>
              <div class="card-info">
                <div class="card-title">在租设备数量</div>
                <div class="card-value">865</div>
                <div class="card-trend">
                  <span class="trend-up"><i class="el-icon-top"></i> 8%</span>
                  <span class="period">较上月</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="data-card">
              <div class="card-icon bg-orange">
                <i class="el-icon-money"></i>
              </div>
              <div class="card-info">
                <div class="card-title">租赁总金额</div>
                <div class="card-value">¥328,750</div>
                <div class="card-trend">
                  <span class="trend-up"><i class="el-icon-top"></i> 15%</span>
                  <span class="period">较上月</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="6">
            <div class="data-card">
              <div class="card-icon bg-purple">
                <i class="el-icon-time"></i>
              </div>
              <div class="card-info">
                <div class="card-title">待审批订单</div>
                <div class="card-value">32</div>
                <div class="card-trend">
                  <span class="trend-down"><i class="el-icon-bottom"></i> 5%</span>
                  <span class="period">较上周</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 租赁操作区 -->
      <div class="lease-actions">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <div class="action-panel">
              <div class="panel-header">
                <i class="el-icon-plus"></i>
                <span>发布租赁设备</span>
              </div>
              <div class="panel-content">
                <p>将您的闲置设备发布到平台上，获取稳定租金收益</p>
                <div class="stats">
                  <div class="stat-item">
                    <div class="label">当前设备数</div>
                    <div class="value">154</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">出租率</div>
                    <div class="value">72%</div>
                  </div>
                </div>
                <el-button type="primary" class="action-button" @click="$router.push({name: 'LeasePublish'})">立即发布
                </el-button>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <div class="action-panel">
              <div class="panel-header">
                <i class="el-icon-shopping-cart-2"></i>
                <span>我要租赁设备</span>
              </div>
              <div class="panel-content">
                <p>找到您需要的各类设备，低成本高效率解决生产需求</p>
                <div class="stats">
                  <div class="stat-item">
                    <div class="label">可租设备</div>
                    <div class="value">2,783</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">当日新增</div>
                    <div class="value">56</div>
                  </div>
                </div>
                <el-button type="success" class="action-button" @click="$router.push({name: 'LeaseBrowse'})">浏览设备
                </el-button>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <div class="action-panel">
              <div class="panel-header">
                <i class="el-icon-document"></i>
                <span>租赁订单管理</span>
              </div>
              <div class="panel-content">
                <p>便捷管理您的租赁订单，查看历史记录及合同信息</p>
                <div class="stats">
                  <div class="stat-item">
                    <div class="label">进行中</div>
                    <div class="value">38</div>
                  </div>
                  <div class="stat-item">
                    <div class="label">待付款</div>
                    <div class="value">12</div>
                  </div>
                </div>
                <el-button type="warning" class="action-button" @click="$router.push({name: 'LeaseOrders'})">查看订单
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 热门设备列表 -->
      <div class="popular-equipment">
        <div class="section-header">
          <h3>热门租赁设备</h3>
          <el-button type="text">查看全部 <i class="el-icon-arrow-right"></i></el-button>
        </div>
        <el-table :data="equipmentList" style="width: 100%">
          <el-table-column prop="name" label="设备名称" min-width="180"></el-table-column>
          <el-table-column prop="category" label="类别" width="120"></el-table-column>
          <el-table-column prop="dailyPrice" label="日租金(元)" width="120"></el-table-column>
          <el-table-column prop="deposit" label="押金(元)" width="120"></el-table-column>
          <el-table-column prop="available" label="可租数量" width="100"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === '可租' ? 'success' : 'info'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleLease(scope.row)">租赁</el-button>
              <el-button size="mini" type="info" @click="handleDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeaseManagement',
  data() {
    return {
      equipmentList: [
        {
          id: 1,
          name: '大型挖掘机XC-300',
          category: '工程机械',
          dailyPrice: 2800,
          deposit: 20000,
          available: 5,
          status: '可租'
        },
        {
          id: 2,
          name: '工业级3D打印机P-500',
          category: '生产设备',
          dailyPrice: 1500,
          deposit: 15000,
          available: 3,
          status: '可租'
        },
        {
          id: 3,
          name: '自动化生产线控制系统',
          category: '控制系统',
          dailyPrice: 3500,
          deposit: 50000,
          available: 2,
          status: '可租'
        },
        {
          id: 4,
          name: '大型农用收割机H-100',
          category: '农业机械',
          dailyPrice: 2000,
          deposit: 18000,
          available: 8,
          status: '可租'
        },
        {
          id: 5,
          name: '工业清洗设备CW-50',
          category: '清洁设备',
          dailyPrice: 800,
          deposit: 5000,
          available: 12,
          status: '可租'
        }
      ]
    }
  },
  methods: {
    handleLease(row) {
      this.$message.success(`已发起租赁申请：${row.name}`);
    },
    handleDetail(row) {
      this.$message.info(`查看设备详情：${row.name}`);
    }
  }
}
</script>

<style scoped lang="scss">
.lease-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .page-header {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .header-content {
      .title {
        font-size: 22px;
        color: #303133;
        margin: 0 0 10px 0;
      }
    }
  }

  .main-content {
    .overview-cards {
      margin-bottom: 20px;

      .data-card {
        background-color: #fff;
        border-radius: 8px;
        padding: 20px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        height: 120px;

        .card-icon {
          width: 60px;
          height: 60px;
          border-radius: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 15px;

          i {
            font-size: 28px;
            color: #fff;
          }

          &.bg-blue {
            background-color: #409eff;
          }

          &.bg-green {
            background-color: #67c23a;
          }

          &.bg-orange {
            background-color: #e6a23c;
          }

          &.bg-purple {
            background-color: #8e44ad;
          }
        }

        .card-info {
          flex: 1;

          .card-title {
            font-size: 14px;
            color: #909399;
            margin-bottom: 8px;
          }

          .card-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 8px;
          }

          .card-trend {
            font-size: 13px;
            display: flex;
            align-items: center;

            .trend-up {
              color: #67c23a;
              margin-right: 8px;
              display: flex;
              align-items: center;
            }

            .trend-down {
              color: #f56c6c;
              margin-right: 8px;
              display: flex;
              align-items: center;
            }

            .period {
              color: #909399;
            }
          }
        }
      }
    }

    .lease-actions {
      margin-bottom: 20px;

      .action-panel {
        background-color: #fff;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        overflow: hidden;

        .panel-header {
          padding: 15px 20px;
          background: linear-gradient(90deg, #1989fa, #66b1ff);
          color: #fff;
          font-size: 16px;
          font-weight: bold;
          display: flex;
          align-items: center;

          i {
            margin-right: 8px;
            font-size: 18px;
          }
        }

        .panel-content {
          padding: 20px;

          p {
            color: #606266;
            margin-bottom: 15px;
            font-size: 14px;
          }

          .stats {
            display: flex;
            margin-bottom: 15px;

            .stat-item {
              flex: 1;
              text-align: center;
              padding: 0 10px;
              border-right: 1px solid #ebeef5;

              &:last-child {
                border-right: none;
              }

              .label {
                font-size: 13px;
                color: #909399;
                margin-bottom: 5px;
              }

              .value {
                font-size: 20px;
                font-weight: bold;
                color: #303133;
              }
            }
          }

          .action-button {
            width: 100%;
            padding: 12px 0;
          }
        }
      }
    }

    .popular-equipment {
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h3 {
          font-size: 18px;
          color: #303133;
          margin: 0;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .lease-container {
    padding: 10px;

    .page-header {
      padding: 15px;
    }

    .main-content {
      .data-card {
        height: auto;
        flex-direction: column;
        text-align: center;

        .card-icon {
          margin-right: 0;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>
